<template>
  <div class="bar">
    <div class="right">
      <t-button theme="primary" :loading="loading" @click="form.submit()">
        <template #icon><t-icon name="check" /></template>
        {{ plugin.t('btn') }}
      </t-button>
    </div>
    <div class="title">{{ plugin.t('menu.base') }}</div>
  </div>
  <div class="plugin-config-base">
    <div class="box">
      <div class="left-box" style="width: 270px">
        <t-menu class="menu" theme="light" v-model="menu" width="250px">
          <t-menu-item value="0">
            <template #icon>
              <t-icon name="laptop" />
            </template>
            {{ plugin.t('tabs.0') }}
          </t-menu-item>
          <t-menu-item value="1">
            <template #icon>
              <t-icon name="star" />
            </template>
            {{ plugin.t('tabs.1') }}
          </t-menu-item>
        </t-menu>
      </div>
      <div class="box">
        <t-loading :loading="loading">
          <t-form ref="form" :data="formData" :rules="formRule" label-align="top" @submit="onSubmit">
            <template v-if="menu == '0'">
              <div class="bg-box">
                <div class="title">{{ plugin.t('form.tax_type') }}</div>
                <t-form-item label-width="0">
                  <t-radio-group v-model="formData.tax_type">
                    <t-radio v-for="(value, key) in plugin.tm('form.tax_type_text')" :value="key" :key="key">{{ value }}</t-radio>
                  </t-radio-group>
                </t-form-item>
                <t-alert theme="info" :message="plugin.t('form.tax_type_message')" />
              </div>
              <div class="bg-box">
                <div class="title">{{ plugin.t('form.order_discount') }}</div>
                <t-form-item label-width="0" name="order_discount">
                  <t-input v-model="formData.orders.discount" suffix="%" style="width: 250px"></t-input>
                </t-form-item>
                <t-alert theme="info" :message="plugin.t('form.order_discount_message')" />
              </div>
              <div class="bg-box">
                <div class="title">{{ plugin.t('form.client_point') }}</div>
                <t-form-item :label-width="0" name="client_point">
                  <t-input v-model="formData.client_point" suffix="=1" style="width: 250px"></t-input>
                </t-form-item>
                <t-alert theme="info" :message="plugin.t('form.client_point_message')" />
              </div>
              <div class="bg-box">
                <div class="title">{{ plugin.t('form.print_norm') }}</div>
                <t-form-item :label-width="0" name="print_norm">
                  <t-input v-model="formData.print_norm" style="width: 250px"></t-input>
                </t-form-item>
                <t-alert theme="info" :message="plugin.t('form.print_norm_message')" />
              </div>
              <div class="bg-box">
                <div class="title">{{ plugin.t('form.order_remarks') }}</div>
                <t-form-item label-width="0" name="order_remarks">
                  <t-select
                    v-model="formData.orders.remarks"
                    multiple
                    creatable
                    filterable
                  />
                </t-form-item>
              </div>
            </template>
            <template v-else>
              <div class="bg-box">
                <div class="title">{{ plugin.t('form.print_format') }}</div>
                <t-row :gutter="20">
                  <t-col flex="250px">
                    <t-form-item label-width="0" name="print_format">
                      <t-input v-model="formData.print_format"></t-input>
                    </t-form-item>
                  </t-col>
                  <t-col flex="auto">
                    <t-form-item label-width="0" name="print_code">
                      {{ plugin.t('form.code') }} &nbsp; &nbsp;
                      <t-input-number v-model="formData.print_code" style="width: 200px"></t-input-number>
                    </t-form-item>
                  </t-col>
                </t-row>
              </div>
              <div class="bg-box">
                <div class="title">{{ plugin.t('form.print_refund_format') }}</div>
                <t-row :gutter="20">
                  <t-col flex="250px">
                    <t-form-item label-width="0" name="print_refund_format">
                      <t-input v-model="formData.print_refund_format"></t-input>
                    </t-form-item>
                  </t-col>
                  <t-col flex="auto">
                    <t-form-item label-width="0" name="print_refund_code">
                      {{ plugin.t('form.code') }} &nbsp; &nbsp;
                      <t-input-number v-model="formData.print_refund_code" style="width: 200px"></t-input-number>
                    </t-form-item>
                  </t-col>
                </t-row>
              </div>
              <div class="bg-box">
                <div class="title">{{ plugin.t('form.ticket_format') }}</div>
                <t-row :gutter="20">
                  <t-col flex="250px">
                    <t-form-item label-width="0" name="ticket_format">
                      <t-input v-model="formData.ticket_format"></t-input>
                    </t-form-item>
                  </t-col>
                  <t-col flex="auto">
                    <t-form-item label-width="0" name="ticket_code">
                      {{ plugin.t('form.code') }} &nbsp; &nbsp;
                      <t-input-number v-model="formData.ticket_code" style="width: 200px"></t-input-number>
                    </t-form-item>
                  </t-col>
                </t-row>
              </div>
              <div class="bg-box">
                <div class="title">{{ plugin.t('form.ticket_refund_format') }}</div>
                <t-row :gutter="20">
                  <t-col flex="250px">
                    <t-form-item label-width="0" name="ticket_refund_format">
                      <t-input v-model="formData.ticket_refund_format"></t-input>
                    </t-form-item>
                  </t-col>
                  <t-col flex="auto">
                    <t-form-item label-width="0" name="ticket_refund_code">
                      {{ plugin.t('form.code') }} &nbsp; &nbsp;
                      <t-input-number v-model="formData.ticket_refund_code" style="width: 200px"></t-input-number>
                    </t-form-item>
                  </t-col>
                </t-row>
              </div>
              <div class="bg-box">
                <div class="title">{{ plugin.t('form.expect_format') }}</div>
                <t-row :gutter="20">
                  <t-col flex="250px">
                    <t-form-item label-width="0" name="expect_format">
                      <t-input v-model="formData.expect_format"></t-input>
                    </t-form-item>
                  </t-col>
                  <t-col flex="auto">
                    <t-form-item label-width="0" name="expect_code">
                      {{ plugin.t('form.code') }} &nbsp; &nbsp;
                      <t-input-number v-model="formData.expect_code" style="width: 200px"></t-input-number>
                    </t-form-item>
                  </t-col>
                </t-row>
              </div>
              <div class="bg-box">
                <div class="title">{{ plugin.t('form.delivery_format') }}</div>
                <t-row :gutter="20">
                  <t-col flex="250px">
                    <t-form-item label-width="0" name="delivery_format">
                      <t-input v-model="formData.delivery_format"></t-input>
                    </t-form-item>
                  </t-col>
                  <t-col flex="auto">
                    <t-form-item label-width="0" name="delivery_code">
                      {{ plugin.t('form.code') }} &nbsp; &nbsp;
                      <t-input-number v-model="formData.delivery_code" style="width: 200px"></t-input-number>
                    </t-form-item>
                  </t-col>
                </t-row>
              </div>
            </template>
          </t-form>
        </t-loading>
      </div>
    </div>
  </div>
</template>
<script setup>
  import { ref } from 'vue'
  import app from '@/app'
  import index from '../../index'
  import configStore from '../../store'

  const plugin = index.plugin
  const menu = ref('0')

  const form = ref({})
  const formData = ref({ orders: { remarks: [] } })
  const formRule = {
    'orders.discount': [{ required: true, message: ' ', type: 'error' }],
    client_point: [{ required: true, message: ' ', type: 'error' }],
    print_norm: [{ required: true, message: ' ', type: 'error' }],
    print_format: [{ required: true, message: ' ', type: 'error' }],
    print_code: [{ required: true, message: ' ', type: 'error' }],
    ticket_format: [{ required: true, message: ' ', type: 'error' }],
    ticket_code: [{ required: true, message: ' ', type: 'error' }],
    ticket_refund_format: [{ required: true, message: ' ', type: 'error' }],
    ticket_refund_code: [{ required: true, message: ' ', type: 'error' }],
    expect_format: [{ required: true, message: ' ', type: 'error' }],
    expect_code: [{ required: true, message: ' ', type: 'error' }],
    delivery_format: [{ required: true, message: ' ', type: 'error' }],
    delivery_code: [{ required: true, message: ' ', type: 'error' }]
  }

  // 提交配置
  const loading = ref(false)
  const onSubmit = ({ validateResult }) => {
    if (validateResult === true) {
      loading.value = true
      configStore.update(formData.value).then(res => {
        app.message('success', 'message.' + res.message)
      }).catch(err => {
        app.message('error', 'message.error.' + err.message)
      }).finally(() => {
        loading.value = false
      })
    }
  }

  // 加载配置
  const getData = () => {
    loading.value = true
    configStore.get().then(res => {
      formData.value = res
    }).finally(() => {
      loading.value = false
    })
  }
  
  getData()
</script>
<style lang="scss">
  .plugin-config-base{
    .menu{
      background: 0;
      .t-default-menu__inner .t-menu{
        padding: 0
      }
      .t-menu__item.t-is-active:not(.t-is-opened){
        background-color: var(--td-brand-color-2)
      }
    }

    .title{
      font-size: 16px;
      font-weight: bold; 
      padding-bottom: 20px;
    }
  }
</style>